<!-- <template>
    <div id="app">
        <div class="container">
            <div class="shehui-title">
                <h2>教研成果</h2>
                <text>JIAO YAN CHENG GUO</text>
            </div>
            <ul class="etc">
                <li>
                    <a href="#">
                        <div class="spe-bc">
                            <img class="img-block" src="../../assets/13.png" alt="">
                            <img class="img-none" src="../../assets/12.png" alt="">
                            <div class="block">划重点！一图读懂山东<br>城院"十四五"发<br>展规划</div>
                            <div class="none">山东城院"五心工程"<br>温暖校园</div>
                        </div>
                        <div>
                            <p class="block">3月20日下午，烟台高新区<br>管委副主任李如鹏、市教育<br>局高新区分局...</p>
                            <p class="none">3月24日一场别开生面的"<br>平台通过网络直播点形式拉<br>开序幕"</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="spe-bc">
                            <img class="img-block" src="../../assets/13.png" alt="">
                            <img class="img-none" src="../../assets/12.png" alt="">
                            <div class="block">划重点！一图读懂山东<br>城院"十四五"发<br>展规划</div>
                            <div class="none">山东城院"五心工程"<br>温暖校园</div>
                        </div>
                        <div>
                            <p class="block">3月20日下午，烟台高新区<br>管委副主任李如鹏、市教育<br>局高新区分局...</p>
                            <p class="none">3月24日一场别开生面的"<br>平台通过网络直播点形式拉<br>开序幕"</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="spe-bc">
                            <img class="img-block" src="../../assets/13.png" alt="">
                            <img class="img-none" src="../../assets/12.png" alt="">
                            <div class="block">划重点！一图读懂山东<br>城院"十四五"发<br>展规划</div>
                            <div class="none">山东城院"五心工程"<br>温暖校园</div>
                        </div>
                        <div>
                            <p class="block">3月20日下午，烟台高新区<br>管委副主任李如鹏、市教育<br>局高新区分局...</p>
                            <p class="none">3月24日一场别开生面的"<br>平台通过网络直播点形式拉<br>开序幕"</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="spe-bc">
                            <img class="img-block" src="../../assets/13.png" alt="">
                            <img class="img-none" src="../../assets/12.png" alt="">
                            <div class="block">划重点！一图读懂山东<br>城院"十四五"发<br>展规划</div>
                            <div class="none">山东城院"五心工程"<br>温暖校园</div>
                        </div>
                        <div>
                            <p class="block">3月20日下午，烟台高新区<br>管委副主任李如鹏、市教育<br>局高新区分局...</p>
                            <p class="none">3月24日一场别开生面的"<br>平台通过网络直播点形式拉<br>开序幕"</p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</template> -->

<template>
    <div id="app">
        <div class="container">
            <div class="shehui-title">
                <h2>教研成果</h2>
                <text>JIAO YAN CHENG GUO</text>
            </div>
            <ul class="etc">
                <li v-for="(item, index) in items" :key="index">
                    <a href="#">
                        <div class="spe-bc">
                            <img class="img-block" :src="item.imageUrlBlock" alt="">
                            <img class="img-none" :src="item.imageUrlNone" alt="">
                            <div class="block">{{ item.titleBlock }}</div>
                            <div class="none">{{ item.titleNone }}</div>
                        </div>
                        <div class="spe-bc1">
                            <p class="block">{{ item.contentBlock }}</p>
                            <p class="none">{{ item.contentNone }}</p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            items: Array.from({ length: 4 }, () => ({
                imageUrlBlock: 'http://localhost:5173/src/assets/13.png',
                imageUrlNone: 'http://localhost:5173/src/assets/12.png',
                titleBlock: '划重点！一图读懂山东城院"十四五"发展规划',
                titleNone: '山东城院"五心工程"温暖校园',
                contentBlock: '3月20日下午，烟台高新区管委副主任李如鹏、市教育局高新区分局...',
                contentNone: '3月24日一场别开生面的"平台通过网络直播点形式拉开序幕"'
            })),
        };
    },
};
</script>

<style scoped lang="scss">
#app {
    background-image: url(../../assets/keyanchengguo.jpg);
    background-repeat: no-repeat;

    padding: 20px 0 0;

    @media (max-width: 475px) {
        background-repeat: repeat;
    }

    .container {
        margin: 0 auto;
        width: 80%;

        @media (max-width: 475px) {
            width: 90%;
        }

        .shehui-title {
            margin: 60px 0;
            position: relative;
            width: 100%;
            height: 30px;

            h2 {
                text-align: center;
                width: 100%;
                color: #005aac;
                position: absolute;
                z-index: 999;
            }

            text {

                position: absolute;
                top: 8px;
                left: 560px;
                width: 17%;
                font-weight: 600;
                z-index: 1;
                background-image: linear-gradient(#f8fbfd, #ebf2fb);
                -webkit-background-clip: text;
                background-clip: text;
                color: transparent;
                -webkit-text-fill-color: transparent;

                @media (max-width: 475px) {
                    width: 100%;
                    left: 100px;
                }
            }
        }

        .etc {
            margin: 60px 0 0;
            width: 100%;
            height: 380px;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            @media (max-width: 475px) {
                height: 1400px;
            }

            li {
                &:hover {
                    top: -25px;

                    a {
                        .spe-bc {
                            .img-block {
                                display: none;
                            }

                            .img-none {
                                display: block;
                            }

                            .block {
                                display: none;
                            }

                            .none {
                                display: block;
                            }
                        }

                        div {
                            .block {
                                display: none;
                            }

                            .none {
                                display: block;
                            }

                        }
                    }
                }

                position: relative;
                top: 0;
                transition: top 2s ease;
                width: 22%;
                height: 320px;
                overflow: hidden;
                box-sizing: border-box;
                background-color: #fff;

                @media (max-width: 475px) {
                    width: 100%;
                    height: 280px;
                    margin: 10px 0;
                }

                &:nth-child(4) {
                    margin-right: 0;
                }

                a {
                    display: block;
                    width: 100%;
                    height: 320px;
                    color: #000;

                    .spe-bc {
                        width: 100%;
                        height: 160px;
                        overflow: hidden;
                        position: relative;

                        @media (max-width: 475px) {
                            height: 160px;
                        }

                        img {
                            width: 100%;
                            height: 100%;
                        }

                        .img-none {
                            display: none;
                        }

                        .block,
                        .none {
                            position: absolute;
                            top: 0;
                            text-align: center;
                            color: #fff;
                            background-color: rgba(0, 0, 0, 0.5);
                            width: 100%;
                            height: 100%;
                            padding: 50px;

                            @media (max-width: 475px) {
                                padding: 60px 10px;
                                font-size: 16px;
                            }
                        }

                        .block {
                            display: block;
                        }

                        .none {
                            display: none;
                        }
                    }

                    .spe-bc1 {
                        padding: 0 50px;

                        p {
                            text-align: center;
                            margin-top: 20px;
                            line-height: 2em;
                            font-size: 15px;

                            @media (max-width:475px) {
                                line-height: 1.2em;
                                font-size: 16px;
                            }
                        }

                        .none {
                            display: none;
                        }

                        .block {
                            display: block;
                        }
                    }
                }
            }
        }
    }
}
</style>